<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- 由于Vue实例对象挂载到#app表示的dom节点上, 所以Vue实例对象身上定义的数据和方法就可以在这个dom节点内部使用( 在dom节点外部不可以使用 ) -->
    <div id="app">
        
    </div>

    <!-- 这个js文件对外暴露了一个Vue构造函数, 我们可以使用Vue构造函数实例化Vue对象 -->
    <script src="./vue-2.5.21.js"></script>

    <script>
        //实例化Vue对象
        var v = new Vue({
            //这个位置放置Vuejs规定的一些选项( 这些选项的名字是固定的,另外这些选项是可选的 )
            el:'#app', //el Vue实例挂载的dom节点
            data: {} , //data 定义响应式数据, data的类型可以是对象,也可以是函数
            //data: function(){ return {} }, //使用函数的写法,可以在实例化对象时生成一个新的数据
            computed: {} , //computed 定义计算属性
            watch: {} , //watch 定义数据监听
            methods: {} , //methods 定义方法(函数)
            filters: {} , //filters 定义过滤器
            directives: {} , //directives 定义自定义指令
            components: {} , //components 注册局部组件
        })
        
        //我们接下来使用vueJS的声明式编程语法,实现 <数据驱动视图更新>. 

    </script>
</body>
</html>